<template>
  <view class="flex flex-row flex-row-center-start pa-10">
    <childNode
      @change="_checked = $event"
      ref="parentNodeRefNode"
      :followTheme="props.followTheme"
      :checkStrictly="props.checkStrictly"
      v-if="!props.data['children']"
      :fieldNames="props.fieldNames"
      :data="props.data"
    ></childNode>
    <parentNode
      ref="parentNodeRef"
      :followTheme="props.followTheme"
      :index="index"
      :checkStrictly="props.checkStrictly"
      v-if="props.data['children']"
      :fieldNames="props.fieldNames"
      :data="props.data"
    ></parentNode>
    <tm-icon _class="pr-16" :color="nodeData['color']" :font-size="28" v-if="nodeData['icon']" :name="nodeData['icon']"></tm-icon>
    <zh-text
      :color="_checked ? 'primary' : ''"
      :_class="nodeData['disabled'] && !props.data['children'] ? 'opacity-7' : ''"
      @click="textClick(nodeData)"
      :font-size="28"
      :label="nodeData.text"
    ></zh-text>
  </view>
</template>
<script lang="ts" setup>
import childNode from './child-node.vue';
import parentNode from './parent-node.vue';
import { ref, getCurrentInstance, inject, computed, toRaw, watch, watchEffect, Ref } from 'vue';
import { baseNodeData } from './interface';
import { treeFlat } from './util';
const proxy = getCurrentInstance()?.proxy ?? null;
const parentNodeRef = ref<any>(null);
const parentNodeRefNode = ref<any>(null);
const _checked = ref(false);
const emits = defineEmits(['textClick']);
const props = defineProps({
  followTheme: {
    type: [Boolean, String],
    default: true,
  },
  //在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
  checkStrictly: {
    type: Boolean,
    default: false,
  },
  /**
   * 数据
   * @description 生成树结构的数据。结构必须要有id字段。当然可以通过field-names来映射，如果你的唯一标识字段不是Id的话。
   */
  data: {
    type: Object,
    default: () => {},
    required: true,
  },
  /**
   * 数据结构字段的映射表。
   */
  fieldNames: {
    type: Object,
    default: () => {
      return {
        id: 'id',
        text: 'text',
      };
    },
  },
});
//父级方法。
let parent = proxy.$parent;
while (parent) {
  if (parent?.TreeParaentName == 'zhTree' || !parent) {
    break;
  } else {
    parent = parent?.$parent ?? undefined;
  }
}
const TreePareantSelectedIds = inject('TreePareantSelectedIds', ref([]));
const color = parent?.$props.color ?? 'primary';
const nodeData = computed(
  () =>
    <baseNodeData>{
      icon: props.data['icon'] ?? '', //节点图标。
      color: props.data['color'] || color, //节点颜色主题
      disabled: props.data['disabled'] ?? false, //节点是否禁用
      text: props.data[props.fieldNames.text], //节点标题
      id: props.data[props.fieldNames.id], //节点标识
    }
);
//是否允许多选。
const _multiple = parent.$props.multiple ?? true;
const index = ref(1);
const onNodeClick = () => {
  if (!_multiple && TreePareantSelectedIds.value.length >= 1) {
    parent?.checkAll(false);
  }
  parent?.onNodeCheck(props.data);
  parent?.onSelected([nodeData.value.id]);
  index.value = index.value + 1;
};

const checked = computed(() => {
  let sletctedIdArray = TreePareantSelectedIds.value.filter((el: string | number) => el == nodeData.value.id);
  if (sletctedIdArray.length >= 1) {
    return true;
  } else {
    return false;
  }
});

function textClick(node: baseNodeData) {
  //如果存在子级。
  if (!props.data['children']) {
    parentNodeRefNode.value?.setStatus();
  }
  emits('textClick', node);
}
</script>
